<template>
    <div class="wrapper">
        <top-header title="高级筛选" title-left="确定" @leftClick="back"></top-header>
        <div class="body">
            <div class="title">
                <list>
                    <cell v-for="item in titleList" @click="selectTitle(item)">
                        <text class="title_text" :class="[selecTitle == item? 'select_titl_text':'']">{{item.name}}</text>
                    </cell>
                </list>
            </div>
            <div class="content">
                <list>
                    <cell>
                        <div class="conten_brand" @click="showSide" ref="item1">
                            <text class="content_titl">品牌</text>
                            <text class="conten_brand_text iconfont">{{brandItem.brandName}}&#xe605;</text>
                        </div>
                    </cell>
                    <cell>
                        <text class="content_titl" ref="item2">颜色</text>
                        <div v-for="(v, i) in colorsList" class="row color_width">
                            <div v-for="(item, k) in v" class="color_value" :class="[item.codeName ? 'color_val_bord':'', item == colorSelect?'select_back':'']" @click="setColor(item)">
                                <div :class="[item.codeDesc]"></div>
                                <text class="color_name">{{item.codeName}}</text>
                            </div>
                        </div>
                    </cell>
                    <cell>
                        <text class="content_titl" ref="item3">价格</text>
                        <div v-for="(v, i) in priceList" class="row color_width">
                            <div v-for="(item, k) in v" class="color_value" :class="[item.label ? 'color_val_bord':'', item == priceSelect?'select_back':'']" @click="setPrice(item)">
                                <text class="color_name">{{item.label}}</text>
                            </div>
                        </div>
                    </cell>
                    <cell>
                        <text class="content_titl" ref="item4">车龄</text>
                        <div v-for="(v, i) in carAgeList" class="row color_width">
                            <div v-for="(item, k) in v" class="color_value" :class="[item.label ? 'color_val_bord':'', item == carAgeSelect?'select_back':'']" @click="setCarAge(item)">
                                <text class="color_name">{{item.label}}</text>
                            </div>
                        </div>
                    </cell>
                    <cell>
                        <text class="content_titl" ref="item5">排量</text>
                        <div v-for="(v, i) in gasList" class="row color_width">
                            <div v-for="(item, k) in v" class="color_value" :class="[item.label ? 'color_val_bord':'', item == gasSelcet?'select_back':'']" @click="setGas(item)">
                                <text class="color_name">{{item.label}}</text>
                            </div>
                        </div>
                    </cell>
                    <cell>
                        <text class="content_titl" ref="item6">车型</text>
                        <div v-for="(v, i) in modelList" class="row color_width">
                            <div v-for="(item, k) in v" class="color_value" :class="[item.label ? 'color_val_bord':'', item == modelSelcet?'select_back':'']" @click="setModel(item)">
                                <text class="color_name">{{item.label}}</text>
                            </div>
                        </div>
                    </cell>
                </list>
            </div>
        </div>
        <div class="side_pop" ref="side" @swipe="swipePop">
            <list class="left_list">
                <cell class="cellBrand" v-for="(item, index) in brandList" :ref="item.brandEn + index" @click="select(item)">
                    <div class="list_cont">
                        <text class="list_cont_text">{{item.brandEn}}  </text>
                        <image :src="item.brandPic" v-if="item.brandEn" class="list_cont_img"></image>
                        <text class="list_cont_text">  {{item.name}}</text>
                    </div>
                </cell>
            </list>
            <!-- <list class="left_list_index">
                <cell class="cellBrand_index" v-for="(item, index) in brandIndex" @click="selectIndex(item)">
                    <div class="list_cont_index">
                        <text class="list_cont_label">{{item.label}}</text>
                    </div>
                </cell>
            </list> -->
        </div>
    </div>
</template>
<script>
const dom = weex.requireModule('dom')
import Config from './config'
const animation = weex.requireModule('animation')
import header from '../common/header'
export default {
    components: { 
        'top-header': header, 
    },
    data () {
        return {
            token: '',
            userId: '',
            titleList: [],
            selecTitle: {},
            searchParam: {
                p_color: '',
                p_brand: '',
                price: '',
                age: '',
                gas: '',
                p_model: '',
            },
            brandList: [],
            selectBrand: '',
            brandItem: {
                brandName: '请选择品牌'
            },
            colorsList: [],
            colorSelect: '',
            priceList: [],
            priceSelect: '',
            carAgeList: [],
            carAgeSelect: '',
            gasList: [],
            gasSelcet: '',
            modelList: [],
            modelSelcet: '',
            brandIndex: Config.ABC,
        }
    },
    created () {
        let user = this.$storage.getSync('UserInfo')
        this.userId = user.id
        this.getBrandList()
        this.getColorsList()
        this.getTitleList()
        this.searchPrice()
        this.searchAge()
        this.searchGas()
        this.searchModel()
        this.$router.getParams().then(resData => {
            console.log(resData)
        })
        
    },
    eros: {
        beforeDisappear (options) {
            this.$router.setBackParams(this.searchParam)
        },
    },
    methods: {
        // 返回
        back () {
            this.$router.back();
        },
        // 滑动事件
        swipePop (e) {
            if (e.direction == 'left') {
                this.hide()
            }
        },
        hide () {
            this.sideAnima(-750, 800);
        },
        sideAnima (trans, time) {
            var sideEl = this.$refs.side;
            animation.transition(sideEl, {
                styles: {
                    transform: 'translateX(' + trans + 'px)',
                    transformOrigin: 'left center'
                },
                duration: time, //ms
                timingFunction: 'ease',
                delay: 0 //ms
            }, function () {
            })
        },
        // 调取侧栏
        showSide () {
            this.sideAnima(750, 800);
        },
        popupOverlayLeftClick () {
        },
        // 汽车图片
        getCarPic (list) {
            for (let i = 0, len = list.length; i < len; i++) {
                list[i].headImg = list[i].pPics.split(';')[1]
            }
            return list
        },
        getTitleList () {
            this.titleList = [{
                name: '品牌',
                jumpTo: 'item1',
            },{
                name: '颜色',
                jumpTo: 'item2',
            },{
                name: '价格',
                jumpTo: 'item3',
            },{
                name: '车龄',
                jumpTo: 'item4',
            },{
                name: '排量',
                jumpTo: 'item5',
            },{
                name: '车型',
                jumpTo: 'item6',
            }]
            this.selecTitle = this.titleList[0]
        },
        gotoItem (place) {
            const el = this.$refs[place]
            dom.scrollToElement(el, {})
        },
        selectTitle (item) {
            this.selecTitle = item
            this.gotoItem(item.jumpTo)
        },
        // 字典查询接口
        dictionaryRequest (param) {
            return new Promise((resolve, reject) => {
                this.$fetch({
                    method: 'POST',    // 大写
                    name: 'staticData.list', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    data: {
                        code_type: param
                    }
                }).then(resData => {
                    // 成功回调
                    console.log(resData)
                    if(resData && resData.errno == 0){
                        resolve(resData.data)
                    } else {
                        reject(resData.errmsg)
                    }
                }, error => {
                    // 错误回调
                    console.log(error)
                })
            })
        },
        // 封装数据
        dataPack (dataList, name) {
            for (let i = 0, length = dataList.length; i < length; i++) {
                dataList[i].name = dataList[i][name]
            }
            return dataList
        },
        // 查询汽车品牌
        getBrandList () {
            this.$fetch({
                method: 'POST',    // 大写
                name: 'brand.list', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {}
            }).then(resData => {
                // 成功回调
                console.log(resData)
                if(resData && resData.errno == 0){
                    this.brandList = this.dataPack(resData.data.brandList, 'brandName')
                }
            }, error => {
                // 错误回调
                console.log(error)
            })
        },
        select (item) {
            this.brandItem = item
            this.searchParam.p_brand = item.brandId
            this.hide()
        },
        // 查询颜色
        getColorsList () {
            this.dictionaryRequest('car_color').then((res) => {
                this.colorsList = this.colorPack(res)
            }, (error) => {

            })
        },
        // 封装颜色
        colorPack (dataList) {
            let array = []
            let len = dataList.length
            for (let i = 0; i < len; i += 3) {
                array.push(dataList.slice(i, i + 3))
            }
            switch (len % 3) {
                case 1:
                    array[array.length - 1].push({})
                    array[array.length - 1].push({})
                    break;
                case 2:
                    array[array.length - 1].push({})
                    break;
                default:
                    break;
            }
            return array
        },
        // 选择颜色
        setColor (config) {
            this.colorSelect = config
            this.searchParam.p_color = config.id
        },
        // 价格筛选
        searchPrice () {
            let price1 = [{label: '3万以下', value: 1},{label: '3-5万', value: 2},{label: '5-8万', value: 3}]
            this.priceList.push(price1)
            let price2 = [{label: '8-12万', value: 4},{label: '12-18万', value: 5},{label: '18-24万', value: 6}]
            this.priceList.push(price2)
            let price3 = [{label: '24-35万', value: 7},{label: '35-50万', value: 8},{label: '50-100万', value: 9}]
            this.priceList.push(price3)
            let price4 = [{label: '100万以上', value: 10},{},{}]
            this.priceList.push(price4)
        },
        // 选择价格
        setPrice (item) {
            this.priceSelect = item
            this.searchParam.price = item.value
        },
        // 车龄筛选        
        searchAge () {
            let item1 = [{label: '1年以内', value: 1},{label: '2年以内', value: 2},{label: '3年以内', value: 3}]
            this.carAgeList.push(item1)
            let item2 = [{label: '4年以内', value: 4},{label: '5年以内', value: 5},{label: '6年以内', value: 6}]
            this.carAgeList.push(item2)
            let item3 = [{label: '6年以上', value: 10},{},{}]
            this.carAgeList.push(item3)
            // this.$notice.toast({ message: this.carAgeList})
        },
        // 选择车龄
        setCarAge (item) {
            this.carAgeSelect = item
            this.searchParam.age = item.value
        },
        // 排量筛选      
        searchGas () {
            let item1 = [{label: '1.0L以下', value: 1},{label: '1.1-1.5L', value: 2},{label: '1.6-2.0L', value: 3}]
            this.gasList.push(item1)
            let item2 = [{label: '2.1-3.0L', value: 4},{label: '3.0L及以上', value: 5},{}]
            this.gasList.push(item2)
        },
        // 选择排量
        setGas (item) {
            this.gasSelcet = item
            this.searchParam.gas = item.value
        },
        // 车型筛选  
        searchModel () {
            let item1 = [{label: '轿车', value: 1},{label: 'SUV', value: 2},{label: 'MPV', value: 3}]
            this.modelList.push(item1)
            let item2 = [{label: '跑车', value: 4},{label: '皮卡', value: 5},{label: '面包车', value: 6}]
            this.modelList.push(item2)
            let item3 = [{label: '客车', value: 7},{label: '货车', value: 8},{}]
            this.modelList.push(item3)
            // this.$notice.toast({ message: this.carAgeList})
        },
        // 选择车型
        setModel (item) {
            this.modelSelcet = item
            this.searchParam.p_model = item.value
        },
    }
}
</script>
<style>
.iconfont {
    font-family: iconfont;
}
.wrapper{
    background-color: #fff;
}
.body{
    margin-top: 2px;
    flex-direction: row;
    width:750px;
    display:flex;
    background-color: #fff;
}
.title{
    width: 160px;
    background-color: #eee;
    height: 1188px;
}
.title_text{
    font-size: 30px;
    height: 80px;
    line-height: 80px;
    width: 160px;
    text-align: center;
}
.select_titl_text{
    background-color: #fff;
    font-size: 36px;
    font-weight: bold;
}
.content{
    padding-left: 30px;
    padding-right: 30px;
    height: 1188px;
    flex:1
}
.content_titl{
    font-size: 36px;
    font-weight: bold;
    height: 80px;
    line-height: 80px;
}
.conten_brand_text{
    font-size: 30px;
    color: #666;
}
.conten_brand{
    width: 540px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #eee;
}
.red{
    height: 30px;
    width: 30px;
    background-color: #f00;
}
.green{
    height: 30px;
    width: 30px;
    background-color: #0f0;
}
.blue{
    height: 30px;
    width: 30px;
    background-color: #00f;
}
.yellow{
    height: 30px;
    width: 30px;
    background-color: #ff0;
}
.white{
    height: 30px;
    width: 30px;
    background-color: #fff;
}
.black{
    height: 30px;
    width: 30px;
    background-color: #000;
}
.silver_gray{
    height: 30px;
    width: 30px;
    background-color: #C0C0C0;
}
.purple{
    height: 30px;
    width: 30px;
    background-color: #8A2BE2;
}
.brown{
    height: 30px;
    width: 30px;
    background-color: #A52A2A;
}
.brownness{
    height: 30px;
    width: 30px;
    background-color: #556B2F;
}
.orange{
    height: 30px;
    width: 30px;
    background-color: #FFA500;
}
.pink{
    height: 30px;
    width: 30px;
    background-color: #FFC0CB;
}
.champagne{
    height: 30px;
    width: 30px;
    background-color: #FFFF99;
}
.color_width {
    width: 540px;
}
.row{
    flex-direction: row;
    /* height:80px; */
}
.select_back{
    background-color: #aaa;
}
.color_value{
    flex-direction: row;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 15px;
    padding: 5px;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.color_val_bord{
    border-style: solid;
    border-color: #999;
    border-width: 1px;
}
.color_name{
    color: #666;
    margin-left: 15px;
}
.cellBrand{
    width: 750px;
    border-bottom-color: #eee;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.list_cont{
    height: 100px;
    margin-left: 20px;
    flex-direction: row;
    align-items: center;
}
/* .left_list{
    margin-top: 40px;
} */
.list_cont_img{
    width: 50px;
    height: 50px;
    margin-right: 20px;
}
.list_cont_text{
    color: #333;
    font-size: 30px;
}
.headerRightText{
    font-size: 35px;
    color: #666;
    padding-right: 20px;
}
left_list_index{
    position: absolute;
    height: 1000px;
    top: 100px;
    right: 20px;
    border-style: solid;
    border-width: 1px;
    border-color: #aaa;
    border-radius: 5px;
}
.cellBrand_index{
    width: 40px;
    border-bottom-color: #eee;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.list_cont_index{
    height: 50px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.list_cont_label{
    color: #333;
    font-size: 20px;
    
    text-align: center;
}
/* 左侧弹窗 */
.side_pop{
    position: absolute;
    top: 138px;
    background-color: #fff;
    width: 750px;
    height: 1334px;
    left: -750px;
}
</style>